<style>
.editor-render-wrap {
  font-size: 14px;
  /*background-color: #f5f7fa;*/
  width: 100%;
  height: 100%;
  max-height: 100%;
  position: relative;
  padding: 0px 10px;
  line-height: 1.75;
  height: 100%;
  color: #434a54;
  /*overflow: auto;*/
}
.display_area{
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    /*width: 700px;*/
    height: 52px;
    margin-right: 140px;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    padding: 0 20px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.display_area h2{
  font-size: 18px;
  color: #159af1;
  margin-right: 10px;
}
.display_area span{
  font-size: 14px;
  color: #666;
}
.editor-render-wrap pre {
  padding: 0;
  margin: 0;
  display: inline;
  outline: none;
  border: none;
  background: none;
  font-size: 1em;
  border-radius: 0;
  font-family: inherit;
  white-space: pre-wrap;
}
.editor-render-wrap ul {
  padding: 0;
  margin: 0;
}
.editor-render-wrap ul li {
  list-style: none;
  word-break: break-all;
}
.editor-render-wrap .config-wrap {
  border: 1px solid #e0e0e0;
  margin-top: 10px;
  padding: 5px 10px;
  background-color: #fff;
}
.editor-render-wrap .config-wrap:before {
  content: '全局设置（默认）';
  display: block;
  color: #ffa400;
  margin-bottom: 5px;
}
.editor-render-wrap .config-wrap li {
  padding: 2px 0;
  line-height: 18px;
}
.editor-render-wrap .config-wrap li:before {
  content: ' ';
  display: inlien-block;
  border-left: 2px solid #159af1;
  margin-right: 0.5em;
}
.editor-render-wrap .config-wrap li span {
  color: #aab2bd;
}
.editor-render-wrap .question-wrap {
  margin-top: 10px;
  border: 1px solid #e0e0e0;
  padding: 10px;
  background-color: #fff;
  overflow-y: scroll;
  height: -webkit-calc(100% - 200px);
  height: calc(100% - 200px);
}
.editor-render-wrap .question-wrap:before {
  content: '题目列表';
  display: block;
  color: #ffa400;
  margin-bottom: 5px;
}
.editor-render-wrap .question-wrap li.q-item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  border-bottom: 1px dotted #d6dae1;
  padding: 10px 0;
}
.editor-render-wrap .question-wrap li.q-item .q-seq {
  /*font-family: Constantia, Georgia;*/
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  color: #159af1;
  font-weight: bold;
  font-size: 18px;
  line-height: 1;
}
.editor-render-wrap .question-wrap li.q-item .q-seq:after {
  content: '、';
}
.editor-render-wrap .question-wrap li.q-item .q-content {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}
.editor-render-wrap .question-wrap li.q-item .q-baseinfo {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -webkit-align-items: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  font-size: 0.9em;
  margin-bottom: 5px;
}
.editor-render-wrap .question-wrap li.q-item .q-baseinfo .q-type {
  color: #aab2bd;
}
.editor-render-wrap .question-wrap li.q-item .q-baseinfo .q-skill.undefined {
  color: #aab2bd;
}
.editor-render-wrap .question-wrap li.q-item .q-baseinfo .q-skill,
.editor-render-wrap .question-wrap li.q-item .q-baseinfo .q-difficulty {
  margin-left: 5px;
  margin-top: -4px;
  background-color: #e6e9ed;
  padding: 3px 10px;
  border-radius: 2px;
  display: inline-block;
  white-space: nowrap;
  line-height: 1.4;
}
.editor-render-wrap .question-wrap li.q-item .q-baseinfo .q-skill:before,
.editor-render-wrap .question-wrap li.q-item .q-baseinfo .q-difficulty:before {
  content: '知识点：';
  font-size: 0.9em;
  color: #aab2bd;
}
.editor-render-wrap .question-wrap li.q-item .q-baseinfo .q-difficulty:before {
  content: '题目难度：';
}
.editor-render-wrap .question-wrap li.q-item .q-options-wrap {
  margin-top: 10px;
}
.editor-render-wrap .question-wrap li.q-item .q-options-wrap .q-option {
  /*border: 1px solid #e6e9ed;*/
  border-radius: 2px;
  padding: 6px 12px;
  margin-bottom: 5px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
.editor-render-wrap .question-wrap li.q-item .q-options-wrap .q-option .option-icon {
  position: relative;
  font-size: 1em;
  content: ' ';
  text-align: center;
  color: #fff;
  display: inline-block;
  border: 1px solid #8cadca;
  width: 15px;
  height: 15px;
  line-height: 15px;
  margin-right: 10px;
  border-radius: 2px;
}
.editor-render-wrap .question-wrap li.q-item .q-options-wrap .q-option .option-icon.single {
  border-radius: 18px;
}
.editor-render-wrap .question-wrap li.q-item .q-options-wrap .q-option .option-icon.active {
  border: 1px solid #409EFF;
  background-color: #409EFF;
  box-shadow: 1px 1px 1px rgba(0,0,0,0.125) inset;
}
.editor-render-wrap .question-wrap li.q-item .q-options-wrap .q-option .option-icon.active:after {
  box-shadow: 0 1px 1px rgba(0,0,0,0.125);
}
.editor-render-wrap .question-wrap li.q-item .q-options-wrap .q-option .option-icon.active.multiple:after {
  content: " ";
  display: block;
  position: absolute;
  width: 7px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  left: 3px;
  top: 3px;
  border-radius: 1px;
}
.editor-render-wrap .question-wrap li.q-item .q-options-wrap .q-option .option-icon.active.single:after {
  content: " ";
  display: block;
  position: absolute;
  width: 5px;
  height: 5px;
  background-color: #fff;
  left: 5px;
  top: 5px;
  border-radius: 10px;
}
.editor-render-wrap .question-wrap li.q-item .q-options-wrap .q-option .option-index {
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  min-width: 1.2em;
  color: #8cadca;
}
.editor-render-wrap .question-wrap li.q-item .q-options-wrap .q-option .option-index:after {
  content: '.';
  margin-right: 5px;
}
.editor-render-wrap .question-wrap li.q-item .q-options-wrap .q-option .option-content {
  display: table;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}
.editor-render-wrap .question-wrap .property-config {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -webkit-align-items: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
}
.editor-render-wrap .question-wrap .property-config .property-key {
  -webkit-flex-shrink: 1;
  -ms-flex-negative: 1;
  flex-shrink: 1;
  color: #aab2bd;
  white-space: nowrap;
}
.editor-render-wrap .question-wrap .property-config .property-value {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  line-height: 1.75;
}
.editor-render-wrap .question-wrap .property-config .property-value span {
  color: #8cadca;
  padding: 0 0.5em;
}
</style>
<template>
  <div class="editor-render-wrap">
    <div class="display_area">
      <h2>显示区</h2>
      <span>此处显示题目列表</span>
    </div>
    <div class="config-wrap">
      <ul>
        <li><span>题型：</span>{{renderData.configs && renderData.configs.questionType || '未指定'}}</li>
        <li><span>知识点：</span>{{renderData.configs && renderData.configs.questionSkill || '未指定'}}</li>
        <li><span>题目难度：</span>{{renderData.configs && renderData.configs.difficulty || '中'}}</li>
      </ul>
    </div>
    <div class="question-wrap" ref="container">
      <ul>
        <li v-for="(q, index) in renderData.questions" class="q-item">
          <a :href="'#question' + index"></a>
          <div class="q-seq">{{index + 1}}</div>
          <div class="q-content">
            <div class="q-baseinfo">
              <span class="q-type">[ {{q.questionType}} ]</span>
              <span class="q-skill" :class="{'undefined':!q.questionSkill}">{{q.questionSkill || '未指定'}}</span>
              <span class="q-difficulty">{{q.difficulty}}</span>
            </div>
            <pre>{{q.title}}</pre>
            <ul class="q-options-wrap">
              <li class="q-option"
                  track-by="$index"
                  v-for="(content,optionIndex) in q.options">
                <span class="option-icon" :class="optionStyle(optionIndex, q)"></span>
                <span class="option-index">{{getOptionIndex(optionIndex)}}</span>
                <pre class="option-content">{{content}}</pre>
              </li>

              <div class="property-config" v-if="q.blanks">
                <span class="property-key">填空数：</span>
                <pre class="property-value">{{q.blanks}}</pre>
              </div>

              <div class="property-config" v-if="q.answerStyle">
                <span class="property-key">答案形式：</span>
                <pre class="property-value">{{q.answerStyle}}</pre>
              </div>

              <div class="property-config" v-if="q.refAnswer.blankAnswer"
                   track-by="$index"
                   v-for="(blank,index) in q.refAnswer.blankAnswer">
                <span class="property-key">参考答案{{index + 1}}：</span>
                <div class="property-value">{{blank}}</div>
              </div>

              <div class="property-config" v-if="q.refAnswer.textAnswer">
                <span class="property-key">参考答案：</span>
                <pre class="property-value">{{q.refAnswer.textAnswer}}</pre>
              </div>

              <div class="property-config" v-if="q.answerExplain">
                <span class="property-key">解析：</span>
                <pre class="property-value">{{q.answerExplain}}</pre>
              </div>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  import $ from "jquery"
  import _ from 'lodash'
  const keyMap = {
    questionType: '题型',
    questionSkill: '知识点',
    difficulty: '题目难度'
  }

  let $container

  export default {
    props: {
      renderData: {
        type: Object,
        default(){
          return {
            configs: {},
            questions: []
          }
        }
      },
      scrollPercent: {
        type: Number,
        default: 0
      }
    },
    computed: {
    },
    methods: {
      getOptionIndex(index) {
        return String.fromCharCode('A'.charCodeAt() + index)
      },
      optionStyle(index, qData) {
        let type = qData.questionType
        let styles = []
        if (type === '单选' || type === '判断') {
          styles.push('single')
        } else {
          styles.push('multiple')
        }
        if (qData.refAnswer) {
          let currOpt = String.fromCharCode('A'.charCodeAt() + index)
          if (qData.refAnswer.optAnswer.indexOf(currOpt) != -1) {
            styles.push('active')
          }
        }
        return styles
      }
    },
    watch: {
      scrollPercent(val) {
        $(this.$refs.container).stop().animate({
          scrollTop: this.$refs.container.scrollHeight * val
        }, 50);
      },
    },
    filters: {
      keyFilter(value) {
        return keyMap[value] || ''
      },
      formatBlank(value) {
        return _.map((value + '').split('|'), _.trim).join('<span>或</span>')
      }
    },
    data() {
      return {}
    },
    mounted() {
      $container = $(this.$refs)
    }
  }
</script>
